<template>
  <view class="page">
    <view class="statistics" v-if="statisticsData && statisticsData.length > 0">
      <view class="statistics-number-item blue">
        <view class="title">专升本</view>
        <view class="invite-count">{{ statisticsData[0].totalNum }}人</view>
        <view class="money"
          >￥{{ statisticsData[0].totalPrice.toFixed(2) }}</view
        >
      </view>
      <view class="statistics-number-item green">
        <view class="title">四六级</view>
        <view class="invite-count">{{ statisticsData[2].totalNum }}人</view>
        <view class="money"
          >￥{{ statisticsData[2].totalPrice.toFixed(2) }}</view
        >
      </view>
      <view class="statistics-number-item orange">
        <view class="title">普通话</view>
        <view class="invite-count">{{ statisticsData[1].totalNum }}人</view>
        <view class="money"
          >￥{{ statisticsData[1].totalPrice.toFixed(2) }}</view
        >
      </view>
    </view>
    <view class="invite-list">
     <!-- <qiunDataCharts
        :chartData="chartData"
        :opts="chartOptions"
        type="mix"></qiunDataCharts> -->
    </view>
  </view>
</template>
<script>
// import qiunDataCharts from "../../../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts"
import request from "@/utils/request.js"
export default {
  // components: { qiunDataCharts },
  data() {
    return {
      statisticsData: [],
      chartOptions: {
        timing: "easeOut",
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 15],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: false,
        dataPointShape: true,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: true,
          position: "bottom",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10,
        },
        xAxis: {
          disableGrid: true,
          disabled: false,
          axisLine: true,
          axisLineColor: "#CCCCCC",
          calibration: false,
          fontColor: "#666666",
          fontSize: 13,
          lineHeight: 20,
          marginTop: 0,
          rotateLabel: false,
          rotateAngle: 45,
          itemCount: 5,
          boundaryGap: "center",
          splitNumber: 5,
          gridColor: "#CCCCCC",
          gridType: "solid",
          dashLength: 4,
          gridEval: 1,
          scrollShow: false,
          scrollAlign: "left",
          scrollColor: "#A6A6A6",
          scrollBackgroundColor: "#EFEBEF",
          title: "",
          titleFontSize: 13,
          titleOffsetY: 0,
          titleOffsetX: 0,
          titleFontColor: "#666666",
          format: "",
        },
        yAxis: {
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "dash",
          dashLength: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              position: "right",
              title: "金额",
              type: "value",
              textAlign: "left",
              min: 0,
            },
            {
              type: "value",
              position: "left",
              title: "人数",
              textAlign: "right",
              min: 0,
            },
          ],
        },
        extra: {
          mix: {
            column: {
              width: 20,
              seriesGap: 2,
              barBorderCircle: false,
              linearType: "none",
              linearOpacity: 1,
              colorStop: 0,
            },
            area: {
              opacity: 0.2,
              gradient: false,
            },
            line: {
              width: 2,
            },
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "auto",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666",
          },
          markLine: {
            type: "solid",
            dashLength: 4,
            data: [],
          },
        },
      },
    }
  },
  computed: {
    chartData() {
      if (this.statisticsData && this.statisticsData.length > 0) {
        return {
          categories: ["专升本", "四六级", "普通话"],
          series: [
            {
              name: "金额",
              index: 0,
              type: "column",
              data: [
                this.statisticsData[0].totalPrice,
                this.statisticsData[2].totalPrice,
                this.statisticsData[1].totalPrice,
              ],
            },
            {
              name: "人数",
              index: 1,
              type: "line",
              color: "#F3C953",
              data: [
                this.statisticsData[0].totalNum,
                this.statisticsData[2].totalNum,
                this.statisticsData[1].totalNum,
              ],
            },
          ],
        }
      } else {
        return {}
      }
    },
  },
  onShow() {
    this.getStatisticData()
  },
  methods: {
    getStatisticData() {
      uni.showLoading({
        title: "加载中",
      })
      request({
        url: "/userShare/listUserRegisterAppCount",
        method: "post",
        data: {
          current: 1,
          size: -1,
        },
      })
        .then((res) => {
          this.statisticsData = res
        })
        .catch((err) => {
          console.log(err, "err")
          uni.showToast({
            title: err,
            icon: "none",
          })
        })
        .finally(() => {
          uni.hideLoading()
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.page {
  padding-top: 54rpx;
  .statistics {
    display: flex;
    padding: 0 16rpx;
    .statistics-number-item {
      width: calc((100vw - 32rpx) / 3 - 24rpx);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 0 12rpx;
      height: 216rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0, 0, 0, 0.1);
      .title {
        font-size: 32rpx;
        color: #333333;
        font-weight: 500;
      }
      .invite-count {
        font-size: 32rpx;
        margin-top: 16rpx;
      }
      .money {
        font-weight: 500;
        margin-top: 4rpx;
      }
      &.blue {
        background: #e5f6ff;
        .invite-count,
        .money {
          color: #63afe9;
        }
      }
      &.green {
        background: #e7fef2;
        .invite-count,
        .money {
          color: #63d59a;
        }
      }
      &.orange {
        background: #fff6de;
        .invite-count,
        .money {
          color: #e5b430;
        }
      }
    }
  }
  .invite-list {
    margin-top: 70rpx;
  }
}
</style>
